import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

class ArtList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 108,
            style: {},
            dataset: {},
            layout: '',
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset, layout} = data;
        var artList = dataset.artList || [];

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'goodsMListWrap cmptEle ': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className="artList">
                    {
                        artList.length > 0 ?
                            artList.map(function (goods, index) {
                                return (
                                    layout == 'column' ?
                                        <div className="artList__item_column"
                                             key={'artList__item_column' + goods.artId}>
                                            <img src={goods.imageUrl} alt=""
                                                 className="artList__item__img"/>
                                            <div className="artList__item__info">
                                                <div
                                                    className="artList__item__title">{goods.title}</div>
                                                <div className="artList__item__bInfo">
                                                    <div
                                                        className="artList__item__amountWrap">
                                                        <div
                                                            className="artList__item__pageView">
                                                                                        <span
                                                                                            className="artList__item__pageView__icon"></span>
                                                            <span
                                                                className="artList__item__pageView__text">{goods.pageView}</span>
                                                        </div>
                                                    </div>
                                                    <div
                                                        className="artList__item__time">{goods.createTime}</div>
                                                </div>
                                            </div>
                                        </div>
                                        :
                                        <div className="artList__item"
                                             key={'artList__item' + goods.artId}>
                                            <div className="artList__item__info">
                                                <div
                                                    className="artList__item__title">{goods.title}</div>
                                                <div className="artList__item__bInfo">
                                                    <div
                                                        className="artList__item__pageView">
                                                                                    <span
                                                                                        className="artList__item__pageView__icon"></span>
                                                        <span
                                                            className="artList__item__pageView__text">{goods.pageView}</span>
                                                    </div>

                                                    <div
                                                        className="artList__item__time">{goods.createTime}</div>
                                                </div>
                                            </div>
                                            <img src={goods.imageUrl} alt=""
                                                 className="artList__item__img"/>
                                        </div>
                                )
                            })
                            :
                            (
                                <div className="gModList__mod">
                                    <div className="gModList__list gModList__list_empty">
                                        还没有配置数据哦~
                                    </div>
                                </div>
                            )
                    }
                </div>
            </div>
        );
    }
}

export default ArtList;
